<template>
  <common-drawer
    size="550px"
    title="分配角色"
    :visible.sync="roleConfigVisible"
    :confirm="handleConfigConfirm"
  >
    <div class="transfer-content">
      <el-transfer
        v-model="value"
        v-loading="loadingTransfer"
        filterable
        :props="props"
        filter-placeholder="请输入角色名称"
        :titles="['未选择角色列表', '已选择角色列表']"
        :data="dataList"
        @change="rightOrLeftCheckChange"
      >
      </el-transfer>
    </div>
  </common-drawer>
</template>

<script>
import CommonDrawer from '@/components/common-drawer'

import * as api from '@/const/api'

export default {
  components: {
    CommonDrawer,
  },
  props: {
    // 是否显示侧边栏
    visible: {
      type: Boolean,
      default: false,
    },
    curRowForm: {
      type: Object,
      default: () => {},
    },
    confim: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      dataList: [],
      value: [],
      loadingTransfer: false,
      props: {
        key: 'id',
        label: 'name',
      },
      rightCheckData: [],
    }
  },
  computed: {
    roleConfigVisible: {
      get(val) {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      },
    },
  },
  created() {
    this.init()
    this.goPage()
  },
  methods: {
    async init() {
      try {
        const { code, msg, data } = await this.$axios.$get(api.getUserRole(this.curRowForm.id))
        if (+code !== 200) {
          throw new Error(msg || '操作失败')
        }
        const roleId = data.map(({ id }) => id)
        this.rightCheckData = roleId
        this.value = roleId
      } catch (err) {
        err.message && this.$message.error(err.message)
      }
    },
    async goPage() {
      try {
        this.loadingTransfer = true
        const { code, msg, data } = await this.$axios.$post(api.sysRolePage, {
          params: {
            pageSize: 10000,
            pageNo: 1,
          },
        })
        if (+code !== 200) {
          throw new Error(msg || '操作失败')
        }
        this.dataList = data.list
      } catch (err) {
        err.message && this.$message.error(err.message)
      } finally {
        this.loadingTransfer = false
      }
    },
    async handleConfigConfirm() {
      const params = {
        userId: this.curRowForm.id,
        roleIds: this.rightCheckData || [],
      }
      return this.confim(params)
    },
    rightOrLeftCheckChange(events, direction) {
      this.rightCheckData = events
    },
  },
}
</script>

<style lang="less" scoped>
.transfer-content {
  padding-top: 20px;

  :deep(.el-transfer) {
    .el-input {
      width: 168px;
    }

    .el-checkbox-group {
      height: 400px;
    }

    .el-transfer-panel__body {
      height: 462px;
    }

    .el-transfer__buttons {
      .el-button {
        display: block;
        width: 40px;
        height: 40px;
        color: #fff;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        font-size: 16px;
        margin: 10px auto;
        font-weight: bold;
        cursor: pointer;
        padding: 0;
        box-sizing: border-box;
        min-width: 40px;

        &.is-disabled:hover {
          cursor: not-allowed;
        }

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }
}
</style>
